<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>6-5 立方体绘制（索引法-指定每个面颜色）</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0 !important;
    }
    body {
      border: 1px solid #ccc;
    }
    #canvas {
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>

  <script>
    const ctx = document.getElementById('canvas');
    const gl = ctx.getContext('webgl');

    /**
     * 创建着色器源码
     * */
    // 顶点着色器
    // gl_Position vec4(0.0, 0.0, 0.0, 1.0) x, y, z, w齐次坐标（x/w, y/w, z/w）
    const VERTEX_SHADER_SOURCE = `
      attribute vec4 aPosition;
      attribute vec4 aColor;
      varying vec4 vColor;

      uniform mat4 mat;
      void main() {
        gl_Position = mat * aPosition;
        vColor = aColor;
      }
    `;

    // 片元着色器
    // gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) r, b, g, a
    const FRAGMENT_SHADER_SOURCE = `
      precision lowp float;
      varying vec4 vColor;

      void main() {
        gl_FragColor = vColor;
      }
    `;

    /**
     * 创建着色器
     * */
    const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);

    const aPosition = gl.getAttribLocation(program, 'aPosition');
    const aColor = gl.getAttribLocation(program, 'aColor');
    const mat = gl.getUniformLocation(program, 'mat');

    // 创建三角形系列数据
    const vertices = new Float32Array([
      // 0123  前面
      1, 1, 1,
      -1, 1, 1,
      -1,-1, 1,
      1,-1, 1,
      // 0345  右面
      1, 1, 1,
      1,-1, 1,
      1,-1,-1,
      1, 1,-1,
      // 0156  上面
      1, 1, 1,
      1, 1, -1,
      -1, 1,-1,
      -1, 1,1,
      // 1267  左面
      -1, 1, 1,
      -1,1, -1,
      -1, -1,-1,
      -1,-1,1,
      // 2347  下面
      -1,-1, 1,
      1,-1, 1,
      1,-1,-1,
      -1,-1,-1,
      // 4567  后面
      1,-1,-1,
      1, 1,-1,
      -1, 1,-1,
      -1,-1,-1,
    ]);

    /*
     1, 1, 1,   0
    -1, 1, 1,   1
    -1,-1, 1,   2
     1,-1, 1,   3
     1,-1,-1,   4
     1, 1,-1,   5
    -1, 1,-1,   6
    -1,-1,-1,   7
    * */

    // 创建缓冲区对象
    const buffer = gl.createBuffer();
    // webgl关联缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    // 顶点数据写入缓冲区对象
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    // 给attribute变量赋值
    gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
    // 激活attribute变量
    gl.enableVertexAttribArray(aPosition);

    const colors = new Float32Array([
      0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,
      0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,
      1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,1.0,0.4,0.4,
      1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,1.0,1.0,0.4,
      1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,
      0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,1.0,1.0,
    ]);

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
    gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(aColor)

    const indeces = new Uint8Array([
      0,1,2,0,2,3,
      4,5,6,4,6,7,
      8,9,10,8,10,11,
      12,13,14,12,14,15,
      16,17,18,16,18,19,
      20,21,22,20,22,23,
    ])
    // 创建缓冲区对象
    const indexBuffer = gl.createBuffer();
    // webgl关联缓冲区对象
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
    // 顶点数据写入缓冲区对象
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indeces, gl.STATIC_DRAW);

    let eyex = 3;
    let eyey = 3;
    let eyez = 5;
    let deg = 0;

    function draw() {
      deg += 0.01;
      const rotate = getRotateMatrix(deg);
      const vm = getViewMatrix(eyex,eyey,eyez,0.0,0.0,0.0,0.0,0.6,0.0);
      const perspective = getPerspective(30, ctx.width / ctx.height, 100, 1);
      gl.enable(gl.DEPTH_TEST);
      gl.uniformMatrix4fv(mat, false, mixMatrix(mixMatrix(perspective, vm), rotate));
      // gl.drawArrays(gl.TRIANGLES, 0, points.length / 3);
      gl.drawElements(gl.TRIANGLES, indeces.length, gl.UNSIGNED_BYTE, 0);
      requestAnimationFrame(draw)
    }
    draw();
  </script>
</body>
</html>



















